<template>
  <view class="user-page-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator class="top-left-navigator iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        {{userType === 'user' ?  '暗影岛   佛耶戈' : userType === 'official' ? '投稿号' : ''}}
      </view>
    </navigation-bar>
    <view class="user-main-wrapper" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px)`}">
      <z-paging ref="Paging" :fixed="false" :use-cache="false" :refresher-only="true" @onRefresh="onRefresh">
        <!-- 用户信息面板 -->
        <view class="user-panel">
          <!-- 头像 -->
          <view class="avatar-box" v-if="userType === 'user'">
            <image class="avatar-pic" src="/static/user.png" mode="aspectFill"
              @click="previewAvatar('/static/user.png')"></image>
            <i class="sex-i iconfont" style="color: #16A9FA;">&#xe622;</i>
          </view>
          <navigator url="/subpkg/poster-official-center/poster-official-center" hover-class="none" class="avatar-box"
            v-else-if="userType === 'official'">
            <image class="avatar-pic" src="/static/official.png" mode="aspectFill"></image>
            <i class="sex-i iconfont" style="color: #16A9FA;">&#xe622;</i>
          </navigator>
          <!-- 个人信息 -->
          <view class="user-info">
            <view class="name">
              暗影岛 佛耶戈
            </view>
            <view class="focus">
              <navigator url="/subpkg/my-focus/my-focus?pageType=focusing" hover-class="none"><text
                  class="focus-num">66</text>正在关注
              </navigator>
              <navigator url="/subpkg/my-focus/my-focus?pageType=befocused" class="second-a" hover-class="none">
                <text class="befocused-num">66</text>被关注
              </navigator>
            </view>
            <view class="decoration">
              任何代价，一概不论。一切暴行，但求有功！
            </view>
          </view>
        </view>
        <!-- 关注按钮 -->
        <view class="focus-btn" :class="isFocus ? 'focused': ''" @click="onFocusClick">
          {{isFocus ? '取消关注' : '关注'}}
        </view>
        <!--  Tab 切换栏 -->
        <view class="post-tabs">
          <view class="tabs-inner" @click.capture="onClickTab">
            <v-tabs v-model="current" :tabs="tabs" @change="changeTab" :scroll="false" height="90rpx"
              activeColor="#0191FF" color="#000" fontSize="32rpx" lineHeight="4rpx" lineColor="#0191FF" :lineScale="1"
              lineRadius="0"></v-tabs>
          </view>
        </view>
        <!-- 帖子内容 Swiper -->
        <swiper :duration="300"
          :style="{height: swiperHeight + 'px', 'min-height': `calc(100vh - ${statusbarHeight}px - ${bar_topHeight}px - ${bangs_Height}px - 90rpx)`}"
          class="swiper-wrap" :current="current" @change="onSwiperChange">
          <swiper-item class="swiper-item" :class="'swiper-item' + index" v-for="(item, index) in tabs" :key="item">
            <z-paging ref="paging"
              :empty-view-super-style="{'max-height': `calc(100vh - ${statusbarHeight}px - ${bar_topHeight}px - ${bangs_Height}px - 90rpx)`}"
              :use-page-scroll="true" :use-cache="false" :refresher-enabled="false" :show-refresher-when-reload="false"
              :loading-more-enabled="index === current" :v-model="mapPost[index]" :hide-empty-view="index !== current"
              @contentHeightChanged="ContentHeightChanged" @query="onQuery">
              <view style="padding: 20rpx 40rpx 0;" v-for="post in mapPost[index]" :key="post.id">
                <post-item :post="post" page="user" :post-type="tabs[index]" @edit-handler="onClickEdit"></post-item>
              </view>
            </z-paging>
          </swiper-item>
        </swiper>
      </z-paging>
    </view>
    <!-- 消息提示 -->
    <cc-toast ref="ccToast"></cc-toast>
  </view>
</template>

<script>
  import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import {
    mapState
  } from "vuex";
  import postItem from "@/components/posts-item/posts-item";
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  export default {
    mixins: [naviHeightMix, ZPMixin],
    computed: {
      ...mapState('m_app', ["bangs_Height"])
    },
    data() {
      return {
        isFocus: false,
        current: 0,
        tabs: ['闲置', '求购', '求助', '帖子'],
        mapPost: [],
        postList: [],
        swiperHeight: 0, // 轮播图高度
        userType: '' // 普通用户：user, 投稿号：official
      };
    },
    onLoad(options) {
      // 页面显示方式：普通用户或投稿号
      this.userType = options.userType

      // 演示数据
      this.postList = [
        [{
          id: 1,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
            "/static/post-cover4.png"
          ]
        }, {
          id: 11,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
          ]
        }, {
          id: 12,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png"
          ]
        }, ],
        [{
          id: 2,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "求购一本2022年版本的毛泽东思想，后天考试，急急急急急急急急急！！！",
          post_cover: "",
          picture_list: []
        }],
        [{
          id: 3,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "打听一下，有谁看到过下面的这个耳机啊，我昨天忘了放在主教608了，今天回去发现不见了。",
          post_cover: "/static/post-cover4.png",
          picture_list: [
            "/static/post-cover4.png"
          ]
        }, {
          id: 31,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "打听一下，有谁看到过下面的这个耳机啊，我昨天忘了放在主教608了，今天回去发现不见了。",
          post_cover: "/static/post-cover4.png",
          picture_list: [
            "/static/post-cover4.png"
          ]
        }, {
          id: 32,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "打听一下，有谁看到过下面的这个耳机啊，我昨天忘了放在主教608了，今天回去发现不见了。",
          post_cover: "/static/post-cover4.png",
          picture_list: [
            "/static/post-cover4.png"
          ]
        }],
        []
      ]
      this.mapPost = [
        [{
          id: 1,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
            "/static/post-cover4.png"
          ]
        }, {
          id: 11,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
          ]
        }, {
          id: 12,
          user_avatar: "/static/user.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png"
          ]
        }, ],
        [],
        [],
        []
      ]
      this.$refs.paging[0].reload()
    },

    methods: {
      // 点击相同 Tab 刷新页面
      onClickTab: function(e) {
        const X = e.target.x
        if (X > uni.upx2px(50) && X < uni.upx2px(50 + 162.5)) {
          if (this.current === 0) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5) && X < uni.upx2px(50 + 162.5 * 2)) {
          if (this.current === 1) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5 * 2) && X < uni.upx2px(50 + 162.5 * 3)) {
          if (this.current === 2) {
            this.$refs.Paging.reload()
          }
        } else if (X > uni.upx2px(50 + 162.5 * 3) && X < uni.upx2px(50 + 162.5 * 4)) {
          if (this.current === 3) {
            this.$refs.Paging.reload()
          }
        }
      },
      // 切换 Tab
      changeTab: function(index) {
        this.mapPost[this.current] = []
        this.mapPost[index] = this.postList[index]
        this.$refs.paging[index].reload()

        this.current = index
      },
      // 轮播图切换
      onSwiperChange: function(e) {
        if (e.detail.source === '') return

        this.mapPost[this.current] = []
        this.mapPost[e.detail.current] = this.postList[e.detail.current]
        this.$refs.paging[e.detail.current].reload()

        this.current = e.detail.current
      },
      // 点击关注
      onFocusClick: function() {
        if (this.isFocus === true) {
          this.isFocus = false
          this.$refs.ccToast.show({
            toastText: "取消关注",
          })
        } else {
          this.isFocus = true
          this.$refs.ccToast.show({
            toastText: "关注成功",
          })
        }
      },
      // 点击帖子编辑
      onClickEdit: function() {
        console.log('onClickEdit');
      },
      // 预览头像
      previewAvatar: function(url) {
        uni.previewImage({
          urls: [url],
          indicator: 'none'
        })
      },
      ContentHeightChanged: function(height) {
        this.swiperHeight = height
      },

      // 请求开始
      onQuery: function() {
        this.$refs.paging[this.current].complete(this.mapPost[this.current])

        setTimeout(() => {
          this.$refs.Paging.endRefresh()
        }, 500)
      },
      // 下拉刷新
      onRefresh: function() {
        this.$refs.paging[this.current].reload()
      }
    },
    components: {
      postItem,
      ccToast
    }
  }
</script>

<style lang="scss">
  .user-page-container {
    width: 100%;
    height: 100%;

    .top-left-navigator {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 16px;
      line-height: 16px;
      color: #000;
    }

    .top-title-bar {
      position: absolute;
      left: 60px;
    }

    .user-main-wrapper {
      .user-panel {
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        height: 200rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 30rpx;

        .avatar-box {
          position: relative;

          .avatar-pic {
            width: 120rpx;
            height: 120rpx;
            border-radius: 80rpx;
          }

          .sex-i {
            position: absolute;
            bottom: -8rpx;
            right: -4rpx;
            font-size: 40rpx;
            line-height: 40rpx;
          }
        }

        .user-info {
          width: 76%;
          margin-left: 46rpx;
          font-size: 28rpx;

          .name {
            font-size: 34rpx;
          }

          .focus {
            padding: 6rpx 0;
            display: flex;

            .focus-num,
            .befocused-num {
              color: #0191FF;
              margin-right: 8rpx;
            }

            .second-a {
              margin-left: 30rpx;
            }
          }

          .decoration {
            padding: 6rpx 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .focus-btn {
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 620rpx;
        height: 70rpx;
        background-color: #000;
        border-radius: 50rpx;
        margin-bottom: 20rpx;
        color: #FFF;
        font-size: 28rpx;
        text-align: center;
        line-height: 70rpx;
      }

      .focused {
        background-color: #B7B7B7;
      }

      .post-tabs {
        position: sticky;
        top: -1rpx;
        display: flex;
        width: 100%;
        height: 90rpx;
        background-color: #FFF;
        z-index: 999;

        .tabs-inner {
          width: 100%;
          font-weight: 600;
          padding: 0 50rpx;

          // tabs组件样式覆盖
          .v-tabs__container-item {
            font-weight: 800 !important;
          }
        }
      }

      .swiper-wrap {
        .swiper-item {}
      }
    }
  }
</style>